<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <style>
  	.v-enter,
  	.v-leave-to{
  		opacity: 0;
  		transform: translateY(20px);
  	}
  	.v-enter-active,
  	.v-leave-active{
  		transition: all 0.8s ease;
  	}
  </style>
</head>

<body>
  <div id="app">

	<cmt-box @func="getcomment"></cmt-box>
  

    <transition-group appear tag="ul" class="list-group">
      <li class="list-group-item" v-for="(item,index) in list" :key="index">
        <span class="badge">评论人： {{ item.user }}</span>
        {{ item.content }}
      </li>
    </transition-group>


  </div>


  <template id="tmpl">
    <div>

      <div class="form-group">
        <label>评论人：</label>
        <input type="text" class="form-control" v-model="user">
      </div>

      <div class="form-group">
        <label>评论内容：</label>
        <textarea class="form-control" v-model="content"></textarea>
      </div>

      <div class="form-group">
        <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
      </div>

    </div>
  </template>

  <script>

    var commentBox = {
      data() {
        return {
          user: '',
          content: ''
        }
      },
      template: '#tmpl',
      methods: {
        postComment(){//发表评论的方法
        	//做一个评论的数据对象
        	//评论的数据对象保存到缓存当中 (localStorage)去，
        	//注：localStorage只支持存放数据字符串，要先序列化对象成为字符串 JOSN.stringify() ,在保存 最新的 评论数据之前，要先从 localStorage 获取到之前的评论数据（string）， 转换为 一个  数组对象， 然后，把最新的评论， push 到这个数组
        	//如果获取到的 localStorage 中的 评论字符串，为空不存在， 则  可以 返回一个 '[]'  让 JSON.parse 去转换
        	//把 最新的  评论列表数组，再次调用 JSON.stringify 转为  数组字符串，然后调用 localStorage.setItem()
        	
        	var comment = { id: Date.now(), user: this.user, content: this.content };
        	// 从 localStorage 中获取所有的评论
            var list = JSON.parse(sessionStorage.getItem('cmts') || '[]');
            //最新的评论放在顶部，不用push存，用unshift存
            list.push(comment);
            // 重新保存最新的 评论数据
            sessionStorage.setItem('cmts', JSON.stringify(list))

            this.user = this.content = ''
            //直接在子组件里没有办法调用父组件的方法；得又父组件传古来才能调用
            this.$emit('func',);
        }
      }
    }

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: Date.now(), user: '李白', content: '天生我材必有用' },
          { id: Date.now(), user: '江小白', content: '劝君更尽一杯酒' },
          { id: Date.now(), user: '小马', content: '我姓马， 风吹草低见牛羊的马' }
        ]
      },
      beforeCreate(){ // 注意：这里不能调用 loadComments 方法，因为在执行这个钩子函数的时候，data 和 methods 都还没有被初始化好

      },
      created(){
       	this.getcomment();
      },
      methods: {
        getcomment(){//从本地的localStorage，里去获取已经存好的评论列表
        	var list = JSON.parse(sessionStorage.getItem('cmts') || '[]');
        	//将写死的list替换为localStorage里读到的list
        	this.list= list;
        },
      },
      components: {
        'cmt-box': commentBox
      }
    });
  </script>
</body>

</html>